<script setup>
  import icon from '@/assets/image/icon.png'
  const props = defineProps({
    routes: {
      type: Array,
    },
  })
  import { useRoute } from 'vue-router'
  const route = useRoute()
</script>

<template>
  <div class="sidebar flex-col">
    <h1 class="title flex-center"><img :src="icon" />Library</h1>
    <el-menu router class="menu" :default-active="route.path">
      <el-menu-item
        class="menu-item"
        v-for="(item, index) in props.routes"
        :key="index"
        :route="item.route"
        :index="item.path"
      >
        <el-icon><component :is="item.icon || 'Memo'" /></el-icon>{{ item.label }}</el-menu-item
      >
    </el-menu>
    <el-button type="danger" @click="$emit('logout')" class="logout-btn"> 退出登录 </el-button>
  </div>
</template>

<style scoped lang="less">
  .sidebar {
    background-color: var(--primary-500);
    height: 100%;
  }

  .title {
    height: var(--header-height);
    color: var(--neutral-50);
    background-color: var(--primary-600);
    gap: 20px;
  }

  .menu {
    width: 200px;
    background-color: var(--primary-500);
    border: none;
  }

  .menu-item {
    padding: 10px;
    color: var(--neutral-100);
    font-size: 16px;
    font-weight: 600;

    &.is-active {
      // background-color: var(--primary-700);
      // border-left: 4px solid var(--primary-100);

      background-color: var(--primary-200);
      color: var(--neutral-700);
    }

    &:hover {
      background-color: var(--primary-300);
      color: var(--neutral-600);
    }
  }

  .logout-btn {
    padding: 20px;
    margin: 20px;
    margin-top: auto;
  }
</style>
